<template>
    <div class="msg">
        <van-nav-bar fixed :z-index="100" title="消息中心" left-arrow @click-left="onClickLeft" />
        <div class="msg-list-content-box">
            <div class="curtain" ref="curtain">
                <div class="cav"></div>
              </div>
            <store-scroller @onRefresh="onRefresh" @onInfinite="onLoad" :class="[andBox,Mlv]"  ref="scroller">
              <br>
              <router-link
                v-for="(item,index) in msgList"
                :key="item.id"
                :to='locLink(item.extendInfo,index,item.type)'
              >
               
                <msgListContent :item="item"></msgListContent>
  
                
              </router-link>
            </store-scroller>
        </div>
      </div>
  </template>
  
  <script>
  import { mapState } from 'vuex'
  import {
    Icon,
    Search,
    Swipe,
    SwipeItem,
    PullRefresh,
    List,
    Cell,
    Toast,
    Card,
    Button,
    NavBar
  } from 'vant'
  import Arrow from '@/components/vue-scroller/components/Arrow.vue'
  import storeNavBar from '@/components/store-nav-bar'
  import storeScroller from '@/components/store-scroller'
  import { isIOS } from 'mobile-device-detect'
  import msgListContent from './components/msgListContent'
  export default {
    components: {
      [Icon.name]: Icon,
      [Search.name]: Search,
      [Swipe.name]: Swipe,
      [SwipeItem.name]: SwipeItem,
      [PullRefresh.name]: PullRefresh,
      [List.name]: List,
      [Cell.name]: Cell,
      [Card.name]: Card,
      [Button.name]: Button,
      [NavBar.name]: NavBar,
      Toast,
      Arrow,
      storeNavBar,
      storeScroller,
      msgListContent
    },
    computed: {
      // ...mapState({
      //   content: state => state.home.content
      // })
    },
  
    data() {
      return {
        isIOS: isIOS,
        images: ['', '', '', ''],
        list: [],
        msgList:[],
        pageNum:0,
        pageSize:10,
        andBox:'and-box',
        Mlv:'msg-list-view',
      }
    },
    created() {
      // this.onRefresh();
      // this.$store.dispatch('home/content')
    },
    mounted() {
        this.onPlusReady(() => {
            plus.navigator.setStatusBarStyle('light');
        })
        // this.$refs.scroller.pullToRefresh();
    },
    methods: {
      onRefresh(callBack) {
        this.pageNum = 1;this.pageSize = 10;
        if (typeof callBack == 'function') callBack(false);
        // this.msgList = [];
        this.getList({pageNum:this.pageNum,pageSize:this.pageSize},callBack);
      },
      getList(sendData, callBack) {
        this.$http.post("sysMsg/msgList", sendData).then(data => {
         // this.isNewList = true;
          // this.msgList = data.info;
          this.totalpage = data.totalpage;
          if (sendData.pageNum == 1) {
            this.msgList = data.info;
          } else {
            this.msgList = [...this.msgList, ...data.info];
          }
          // if(this.totalpage <= this.pageNum&& this.totalpage != 0){
            if (typeof callBack == 'function') callBack(this.totalpage <= this.pageNum&& this.totalpage != 0)
         // }
          // window.scrollTo(0, document.documentElement.scrollHeight - document.documentElement.scrollHeight*0.1);
          if (sendData.pageNum > 1) {
            window.scrollTo(0, document.documentElement.scrollHeight - document.documentElement.scrollHeight * 0.1);
          }
        }).finally((res) => {
          // if (typeof callBack == 'function') callBack()
        }).catch((res)=>{
          if (typeof callBack == 'function') callBack(true)
        })
      },
      onScroll(top) {
        // return
        if (top > 0)
          this.$refs.curtain.style.transform =
            'translate(0px,' + -(top / 3) + 'px) scale(1)'
      },
      onLoad(done) {
        // if(!this.totalpage){
        //   this.getList({ pageNum: this.pageNum, pageSize: this.pageSize }, done);
        //   return
        // }
        if (this.totalpage <= this.pageNum&& this.totalpage != 0) {
          if (done) done(true)
          return
        } else {
          this.pageNum = this.pageNum + 1;
        }
        this.getList({ pageNum: this.pageNum, pageSize: this.pageSize }, done);
      },
      locLink(extendInfo,index,type){
        if(type == 1){
          return '/msg/sysMsg/' + this.msgList[index].id
        }else if(type == 2){
          if (extendInfo && JSON.parse(extendInfo).type == 'CONFIRM') {
            return '/msg/msgDetail/' + JSON.parse(extendInfo).orderId
          } else {
            return '/msg/visitMsg/' + this.msgList[index].content
          }
        }else if(type == 3){
          return '/msg/visitMsg/' + this.msgList[index].content
        }
      },
      onClickLeft(){
        this.$router.push('/main/home')
      }
    }
  }
  </script>
  
  <style lang="scss">
    /* .msg-list-box{
      min-height: 100vh;
    } */
    .msg{
      min-height: 100vh;
      padding-top: 1.76rem;
      position: relative;
      /* .msg-list-content-box{
        position: absolute;
        top:0;
        width: 100vw;
        
      } */
      .van-list{
        /* min-height: 100vh;
        padding-top: 1.76rem; */
        min-height: calc(100vh - 1.76rem);


      }
    }
    .msg-list-view{
      ._v-container{
        padding-top: 66px;
      }
      ._v-content{
        padding: 0!important;
      }
    }
    .and-box{
      .van-pull-refresh{
        padding-left: 0!important;
        padding-right: 0!important;
      }
    }
  </style>
  